<template>
  <div class="article">
    <div class="head">
      <div class="head_l">
        <div class="returnBtn" @click="goBack">
          <image src="/static/images/stationInfo/icon_return@2x.png" alt="" mode="widthFix"></image>
        </div>
        <div class="article_title">{{ answerList.exaParper.parperName }}</div>
      </div>

      <div class="head_r">
        <div class="timeOut">
          距本次考试时间结束还有：{{ remainingTime.minutes }} 分 {{ remainingTime.seconds }} 秒
        </div>
      </div>
    </div>

    <div class="articleDetail">

      <div class="flex">
        <!-- 答题区 -->
        <div view class="detailContent" v-for="(item, index) in answerList.exaClassVoList" :key="index">
          <!-- 大标题 -->
          <div class="answer_title">
            <div class="answer_title_">{{ item.exaParperClass.className }}</div>
            <div class="answer_title_">共{{ item.exaClassQuestionsList.length }}题/总计{{
              getTotalScore(item.exaClassQuestionsList) }}分</div>
          </div>

          <div class="answer_content" v-for="(item2, index2) in item.exaClassQuestionsList" :key="index2">
            <!-- 题目 -->
            <div class="answer_content_title">
              <div class="answer_content_title_l">
                <span>{{ index2 + 1 }}.</span>
                <span style="margin-left: calc(100vw * 10 / 2560);">
                  {{ item2.exaQuestionBankVo.exaQuestionBank.title }}
                </span>
              </div>
              <div class="answer_content_title_r">（{{ item2.exaQuestionBankVo.exaQuestionBank.score }}分）</div>
            </div>

            <!-- 答案选项 -->
            <div class="box2" v-for="(option, oIndex) in item2.exaQuestionBankVo.exaQuestionOptionsList" :key="oIndex">
              <div class="answer_content_options" @click.stop="selectAnswer(option, item2.exaQuestionBankVo)"
                v-if="item2.exaQuestionBankVo.exaQuestionBank.type != 4">

                <div class="box">
                  <div class="daAn_txt">
                    {{ String.fromCharCode(65 + oIndex) }}： {{ option.content }}
                  </div>

                  <div class="dui">
                    <image
                      :src="option.selected ? '/static/images/index/icon_mark.svg' : '/static/images/index/icon_mark_nor.svg'"
                      mode="widthFix">
                    </image>
                  </div>
                </div>
              </div>

              <div class="jianda" v-if="item2.exaQuestionBankVo.exaQuestionBank.type == 4">
                <u-textarea v-model="option.content" placeholder="请输入内容..." height="150"
                  @input="handleJiandaInput($event, option)"></u-textarea>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- 答题卡 -->
      <div class="answerCard">
        <div class="answerCard_title">答题信息</div>
        <div class="answerCard_content">
          <div v-for="(item, index) in allQuestions" :key="index"
            :class="['answerCard_item', isQuestionAnswered(item) ? 'active_answerCard_item' : '']"
            @click="scrollToQuestion(index, item)">
            {{ index + 1 }}
          </div>
        </div>
      </div>

    </div>

    <div class="returnTop" :class="{ show: showTopBtn }" @click="goTop">
      <div class="topTxt">Top</div>
    </div>

    <button class="submitBtn" @click="submitAnswer">提交考卷</button>

    <div class="submitAnswer" v-if="open">

      <div class="top">提交考卷</div>

      <div class="center">
        确认提交后，将不可返回修改，请确认全部题目作
        答完成后再提交考卷！
      </div>

      <div class="bottom">
        <u-button type="primary" @click="cancel">返回</u-button>
        <u-button type="error" @click="doSubmit">确认提交</u-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getArticleListByColumnId, getArticleDetailById, getParperInfo } from "@/api/index"
import { baseUrl } from '../../config'
import config from '@/config.js'
import { saveOrUpdateAnswerCard } from "@/api/mine/index.js"

export default {
  // 添加性能优化配置
  options: {
    styleIsolation: 'shared'
  },

  data() {
    return {
      baseUrl: '', // 基础URL
      // 答题列表
      answerList: {
        exaClassVoList: [],
        exaParper: {},
      },
      timer: null, // 计时器
      remainingTime: {
        minutes: 0,
        seconds: 0
      },
      form: {},
      urlData: {}, // 接收的参数
      showTopBtn: false, // 是否显示返回顶部按钮
      open: false,
    }
  },

  onLoad(options) {
    console.log('答题页接收到的参数:', options);
    this.urlData = options;
    // 接收参数
    // this.urlData.parperId = options.parperId;
    // this.urlData.bichId = options.bichId;

    this.baseUrl = config.baseUrl

  },

  mounted() {
    this.baseUrl = config.baseUrl
    // 获取文章列表
    if (this.urlData.parperId) {
      this.getData();
    }

    const scrollEl = document.querySelector('.articleDetail');
    if (scrollEl) {
      scrollEl.addEventListener('scroll', this.handleScroll);
    }
  },

  beforeDestroy() {

    // 移除滚动监听
    const scrollEl = document.querySelector('.articleDetail');
    if (scrollEl) {
      scrollEl.removeEventListener('scroll', this.handleScroll);
    }

    // 组件销毁时清理答题定时器
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },

  // 优化数据观察
  computed: {
    questionOptions() {
      return this.answerList?.exaClassVoList || [];
    },

    // 获取所有题目列表
    allQuestions() {
      let questions = [];
      if (Array.isArray(this.answerList?.exaClassVoList)) {
        this.answerList.exaClassVoList.forEach(classVo => {
          if (Array.isArray(classVo?.exaClassQuestionsList)) {
            questions = [...questions, ...classVo.exaClassQuestionsList];
          }
        });
      }
      return questions;
    }
  },

  methods: {
    // 获取试卷列表
    getData() {
      console.log('获取试卷列表参数:', this.urlData);

      getParperInfo({ parperId: this.urlData.parperId, bichId: this.urlData.bichId,userId:this.urlData.userId }).then(res => {
        console.log(res);
        this.answerList = JSON.parse(JSON.stringify(res.data));

        // 初始化倒计时
        this.initTimer();
      })
    },

    // 计算大题总分方法
    getTotalScore(questionsList) {
      return questionsList.reduce((total, question) => {
        return total + (question.exaQuestionBankVo.exaQuestionBank.score || 0);
      }, 0);
    },

    // 处理答题卡点击事件
    answerCardClick(item) {
      console.log('答题卡点击:', item);
    },

    // 处理选中答案逻辑
    selectAnswer(options, data) {
      console.log('选中答案:', options, data);

      // 单选题和判断题
      if (data.exaQuestionBank.type == 1 || data.exaQuestionBank.type == 3) {
        // 只处理 selected 状态
        data.exaQuestionOptionsList.forEach(option => {
          this.$set(option, 'selected', false);
        });
        this.$set(options, 'selected', true);
      }
      // 多选题
      else if (data.exaQuestionBank.type == 2) {
        // 只切换当前选项的 selected 状态
        this.$set(options, 'selected', !options.selected);
      }

      // 触发视图更新
      this.$forceUpdate();
    },

    // 检查题目是否已答
    isQuestionAnswered(question) {
      return question?.exaQuestionBankVo?.exaQuestionOptionsList?.some(option => option.selected === true);
    },

    // 滚动到指定题目
    scrollToQuestion(index, question) {

      // 获取所有题目元素
      const questionEls = document.querySelectorAll('.answer_content');
      // 获取目标题目元素
      const targetEl = questionEls[index];

      if (targetEl) {
        // 获取滚动容器
        const scrollContainer = document.querySelector('.articleDetail');
        if (scrollContainer) {
          // 计算目标元素相对于容器的偏移量
          const containerTop = scrollContainer.getBoundingClientRect().top;
          const targetTop = targetEl.getBoundingClientRect().top;
          const offsetTop = targetTop - containerTop + scrollContainer.scrollTop;

          // 滚动到目标位置
          scrollContainer.scrollTo({
            top: offsetTop - 80, // 上方预留一些空间
            behavior: 'smooth'
          });

          // 添加高亮效果
          targetEl.classList.add('highlight');
          setTimeout(() => {
            targetEl.classList.remove('highlight');
          }, 2000);
        }
      }
    },

    // 处理简答题输入
    handleJiandaInput(value, option) {
      // 如果有内容就设置 selected 为 true，否则设置为 false
      this.$set(option, 'selected', value.trim().length > 0);
    },

    // 处理提交答案
    submitAnswer() {
      // 检查未答题目
      const unansweredQuestions = this.checkUnansweredQuestions();
      if (unansweredQuestions.length > 0) {
        uni.showModal({
          title: '提示',
          content: `第 ${unansweredQuestions.join('、')} 题尚未作答，是否继续提交？`,
          cancelText: '继续答题',
          confirmText: '确认提交',
          success: (res) => {
            if (res.confirm) {
              // 用户确认提交
              // this.doSubmit();
              this.open = true; // 打开提交弹窗
            } else {
              // 用户选择继续答题，滚动到第一个未答题目
              this.scrollToQuestion(unansweredQuestions[0] - 1);
            }
          }
        });
      } else {
        // 所有题目都已答，直接提交
        // this.doSubmit();
        this.open = true; // 打开提交弹窗
      }
    },

    // 检查未答题目
    checkUnansweredQuestions() {
      const unansweredQuestions = [];
      let questionIndex = 1;

      this.answerList.exaClassVoList.forEach(classVo => {
        classVo.exaClassQuestionsList.forEach(question => {
          const questionBank = question.exaQuestionBankVo;
          const hasAnswer = questionBank.exaQuestionOptionsList.some(option => {
            // 判断是否已答题
            if (questionBank.exaQuestionBank.type === 4) {
              // 简答题检查是否有内容
              return option.content && option.content.trim().length > 0;
            } else {
              // 选择题检查是否有选中的选项
              return option.selected === true;
            }
          });

          if (!hasAnswer) {
            unansweredQuestions.push(questionIndex);
          }
          questionIndex++;
        });
      });

      return unansweredQuestions;
    },

    // 实际提交方法
    doSubmit() {

      // 构造提交数据
      const submitData = {
        bichId: this.urlData.bichId,
        bitchName: this.urlData.bitchName,
        id: this.urlData.id,
        parperId: this.urlData.parperId,
        type: this.urlData.type, // 新增是0 修改是1
        userId: this.urlData.userId,
        exaQuestionBankVos: []
      };

      // 遍历所有题目,整理答案
      this.answerList.exaClassVoList.forEach(classVo => {
        classVo.exaClassQuestionsList.forEach(question => {
          const questionBank = question.exaQuestionBankVo;
          // 构造每道题的数据
          const questionData = {
            exaQuestionBank: {
              ...questionBank.exaQuestionBank,
              createBy: '',
              createTime: '',
              images: '',
              params: {},
              remark: '',
              status: '',
              updateBy: '',
              updateTime: ''
            },
            exaQuestionOptionsList: []
          };

          // 处理选项
          if (questionBank.exaQuestionBank.type === 4) {
            // 简答题保留有内容的选项
            questionBank.exaQuestionOptionsList.forEach(option => {
              if (option.content && option.content.trim().length > 0) {
                questionData.exaQuestionOptionsList.push({
                  ...option, // 保留原有所有属性
                  content: option.content,
                  createBy: '',
                  createTime: '',
                  updateBy: '',
                  updateTime: ''
                });
              }
            });
          } else {
            // 选择题只保留已选择的选项
            questionBank.exaQuestionOptionsList.forEach(option => {
              if (option.selected === true) {
                questionData.exaQuestionOptionsList.push({
                  ...option, // 保留原有所有属性
                  createBy: '',
                  createTime: '',
                  updateBy: '',
                  updateTime: ''
                });
              }
            });
          }

          // 只有有答案的题目才添加到提交数据中
          if (questionData.exaQuestionOptionsList.length > 0) {
            submitData.exaQuestionBankVos.push(questionData);
          }
        });
      });

      console.log('提交的答案:', submitData);

      // 提交答案数据
      saveOrUpdateAnswerCard(submitData).then(res => {
        console.log('提交结果:', res);
        if (res.code === 200) {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          });
          this.goBack();
        }
      });
    },

    cancel() {
      // 关闭弹窗
      this.open = false;
    },

    // 初始化倒计时
    initTimer() {
      if (this.answerList?.exaParper?.answeringTime) {

        // 设置初始时间(分钟转换为毫秒)
        let totalSeconds = this.answerList.exaParper.answeringTime;

        // 更新显示
        this.updateTimeDisplay(totalSeconds);

        // 启动定时器
        this.timer = setInterval(() => {
          totalSeconds--;

          if (totalSeconds <= 0) {
            this.handleTimeUp();
          } else {
            this.updateTimeDisplay(totalSeconds);
          }
        }, 1000);
      }
    },

    // 更新时间显示
    updateTimeDisplay(totalSeconds) {
      this.remainingTime = {
        minutes: Math.floor(totalSeconds / 60),
        seconds: totalSeconds % 60
      };
    },

    // 处理时间结束
    handleTimeUp() {
      clearInterval(this.timer);
      this.timer = null;

      // TODO: 在这里添加时间结束后的处理逻辑
      uni.showModal({
        title: '提示',
        content: '答题时间已结束',
        showCancel: false,
        success: () => {
          // 自动提交答案或其他逻辑
          this.submitAnswer();
        }
      });
    },

    goBack() {
      // 获取当前页面栈
      uni.navigateBack({
        delta: 1,
        fail: (err) => {
          console.error('返回失败:', err);
          // 如果返回失败，跳转到首页
          uni.switchTab({
            url: '/pages/index'
          });
        }
      });
    },

    goTop() {
      const scrollEl = document.querySelector('.articleDetail');
      if (scrollEl) {
        scrollEl.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      }
    },

    handleScroll(e) {
      // 滚动超过 300px 显示按钮
      const scrollTop = e.target.scrollTop;
      this.showTopBtn = scrollTop > 400;
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/ .custom-tab-bar-wrapper {
  display: none !important;
}

.article {
  width: 100vw;
  height: 100vh;
  background-color: #00063A;

  .head {
    width: 100vw;
    height: calc(100vw * 140 / 2560); // 高度按比例自适应
    background: url('@/static/images/index/bg_top2.png') no-repeat center center;
    background-size: cover;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(100vw * 60 / 2560);
    box-sizing: border-box;

    .head_l {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .returnBtn {
        width: calc(100vw * 64 / 2560);
        height: calc(100vw * 64 / 2560);
        margin-right: calc(100vw * 30 / 2560);

        image {
          width: 100%;
          height: 100%;
        }
      }

      .article_title {
        font-size: calc(100vw * 40 / 2560);
        color: #FFFFFF;
        text-align: left;
      }
    }

    .head_r {
      font-size: calc(100vw * 40 / 2560);
      color: #FFFFFF;
      text-align: left;
    }

  }

  .articleDetail {
    width: calc(100vw * 2500 / 2560);
    height: calc(100vh - calc(100vw * 140 / 2560) - calc(100vw * 80 / 2560));
    margin: calc(100vw * 40 / 2560) calc(100vw * 30 / 2560);
    background: url('@/static/images/stationInfo/bg_articleList@2x.png');
    border-radius: calc(100vw * 24 / 2560);
    padding: calc(100vw * 80 / 2560) calc(100vw * 260 / 2560); // 移除底部内边距
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; // 添加弹性滚动
    display: flex; // 添加弹性布局

    .flex {
      width: 100%;
      min-height: 100%; // 改为最小高度
      padding-bottom: calc(100vw * 120 / 2560); // 添加底部内边距到 flex 容器
      display: flex;
      flex-direction: column; // 垂直方向
      gap: calc(100vw * 80 / 2560); // 增加垂直间距
      align-items: stretch; // 让子元素填满容器宽度

      .detailContent {
        width: calc(100vw * 1420 / 2560);
        color: #fff;
        width: 100%;
        height: auto;
        // min-height: 100%; // 添加最小高度
        padding-right: calc(100vw * 68 / 2560);
        box-sizing: border-box;
        display: flex; // 添加弹性布局
        flex-direction: column; // 垂直方向



        .answer_title {
          width: 100%;
          height: calc(100vw * 81 / 2560);
          background: linear-gradient(180deg, #3670FF 0%, #1022D5 100%);
          border-radius: calc(100vw * 12 / 2560);
          font-size: calc(100vw * 32 / 2560);
          padding: calc(100vw * 18 / 2560) calc(100vw * 60 / 2560); // 增加底部内边距
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .answer_content {
          width: 100%;
          height: auto;
          // min-height: calc(100vw * 1000 / 2560);
          // border: #fff solid 1px;
          margin-top: calc(100vw * 48 / 2560);
          display: flex;
          flex-direction: column; // 垂直方向
          gap: calc(100vw * 20 / 2560); // 增加垂直间距
          padding: calc(100vw * 20 / 2560) calc(100vw * 60 / 2560);
          box-sizing: border-box;

          &:last-child {
            margin-bottom: calc(100vw * 80 / 2560); // 最后一个元素增加更大的底部外边距
          }

          .answer_content:last-child {
            margin-bottom: calc(100vw * 180 / 2560); // 最后一个答题内容增加底部外边距
          }

          &.highlight {
            animation: bgFlash 3s linear infinite;
            border-radius: calc(100vw * 12 / 2560);
            box-sizing: border-box;
          }

          .answer_content_title {
            width: 100%;
            min-height: calc(100vw * 80 / 2560); // 改为最小高度
            font-size: calc(100vw * 32 / 2560);
            display: flex;
            justify-content: flex-start; // 改为从头开始对齐
            align-items: flex-start; // 改为顶部对齐
            color: #fff;
            padding: calc(100vw * 18 / 2560) 0;
            box-sizing: border-box;

            .answer_content_title_l {
              width: 95%;
              height: auto;
              word-wrap: break-word;
              word-break: break-all;
              white-space: normal;
              line-height: 1.4;
              padding-top: 0; // 清除顶部内边距
              margin-top: 0; // 清除顶部外边距
            }

            .answer_content_title_r {
              align-self: flex-start; // 分数靠顶对齐
              padding-top: 0; // 清除顶部内边距
              margin-top: 0; // 清除顶部外边距
              margin-left: calc(100vw * 20 / 2560);
            }
          }

          .box2 {

            .jianda {
              width: calc(100vw * 1200 / 2560);
              background: #0B165C;
              border-radius: calc(100vw * 8 / 2560);
              border: 2px solid rgba(251, 251, 251, 0.2);
              padding: calc(100vw * 20 / 2560);
              box-sizing: border-box;
              margin-top: calc(100vw * 20 / 2560);

              /deep/ .u-textarea {
                background: transparent;
                border: none;

                &__field {
                  color: #fff;
                  font-size: calc(100vw * 32 / 2560);
                  min-height: calc(100vw * 150 / 2560);
                }

                &__placeholder {
                  color: rgba(255, 255, 255, 0.5);
                }
              }
            }

            .answer_content_options {
              width: calc(100vw * 1200 / 2560);
              background: #0B165C;
              border-radius: calc(100vw * 8 / 2560);
              border: 2px solid rgba(251, 251, 251, 0.2);
              padding: calc(100vw * 20 / 2560);
              box-sizing: border-box;
              font-size: calc(100vw * 40 / 2560);
              display: flex;
              justify-content: space-between;
              align-items: center;

              .box {
                width: calc(100vw * 1200 / 2560);
                height: auto;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .daAn {
                  width: calc(100vw * 1015 / 2560);
                  height: auto;
                  word-wrap: break-word; // 允许长单词或 URL 地址换行到下一行
                  word-break: break-all; // 允许在单词内换行
                  white-space: normal; // 空白会被忽略，文本会换行
                  line-height: 1.4; // 适当的行高
                  padding: calc(100vw * 5 / 2560) 0; // 添加上下内边距
                }

                .dui {
                  min-width: calc(100vw * 48 / 2560);
                  min-height: calc(100vw * 48 / 2560);

                  image {
                    width: 100%;
                    height: 100%;
                  }
                }
              }


            }
          }
        }
      }
    }

    .answerCard {
      width: calc(100vw * 560 / 2560);
      height: auto;
      // border: 2px solid rgba(251, 251, 251, 0.2);
      color: #fff;

      .answerCard_title {
        font-size: calc(100vw * 32 / 2560);
        color: #FFFFFF;
        text-align: left;
      }

      .answerCard_content {
        width: 100%;
        height: auto;
        max-height: 100%;
        overflow: hidden;
        overflow-y: scroll; // 添加垂直滚动条
        padding: calc(100vw * 20 / 2560) 0;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap; // 允许换行
        gap: calc(100vw * 20 / 2560); // 增加间距

        .answerCard_item {
          width: calc(100vw * 56 / 2560);
          height: calc(100vw * 56 / 2560);
          line-height: calc(100vw * 56 / 2560);
          background: #FFFFFF;
          border-radius: 8px 8px 8px 8px;
          border: 2px solid #707070;
          color: #000;
          font-size: calc(100vw * 32 / 2560);
          text-align: center;
        }

        .active_answerCard_item {
          background: #6974BE;
          color: #000;
        }
      }
    }
  }


  .submitBtn {
    position: fixed;
    bottom: calc(100vw * 80 / 2560);
    left: 40%;
    height: calc(100vw * 290 / 2560);
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100vw * 480 / 2560);
    height: calc(100vw * 120 / 2560);
    font-size: calc(100vw * 48 / 2560);
    color: #FFFFFF;
    background: linear-gradient(180deg, #FF7171 0%, #BE1212 100%);
    box-shadow: inset 0px 0px 9px 1px #1C0007;
    border-radius: 99px 99px 99px 99px;
  }

  .returnTop {
    position: fixed;
    bottom: calc(100vw * 60 / 2560);
    right: calc(100vw * 60 / 2560);
    width: calc(100vw * 70 / 2560);
    height: calc(100vw * 70 / 2560);
    box-shadow: 0px;
    background: rgba(54, 112, 255, 0.2);
    border-radius: calc(100vw * 15 / 2560);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; // 默认透明
    visibility: hidden; // 默认隐藏
    transition: background-color 0.3s ease;

    &.show {
      opacity: 1;
      visibility: visible;
    }

    .topTxt {
      font-size: calc(100vw * 26 / 2560);
      color: #FFFFFF;
      text-align: center;
    }

    &.show {
      animation: bgFlash 3s linear infinite; // 添加闪烁动画
    }

    &:hover {
      background-color: rgba(54, 112, 255, 0.4); // 鼠标悬停时变色
    }
  }

  .submitAnswer {
    width: calc(100vw * 1024 / 2560);
    height: calc(100vw * 540 / 2560);
    background: url('@/static/images/index/bg@2x.jpg') no-repeat center center;
    background-size: cover;
    background-color: transparent;
    padding: 0 calc(100vw * 80 / 2560);
    box-sizing: border-box;
    z-index: 1000;
    color: #fff;
    position: fixed;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .top {
      font-size: calc(100vw * 48 / 2560);
      color: #FFFFFF;
      text-align: center;
      padding-top: calc(100vw * 15 / 2560);
      box-sizing: border-box;
    }

    .center {
      width: calc(100vw * 863 / 2560);
      height: calc(100vw * 183 / 2560);
      ;
      font-size: calc(100vw * 40 / 2560);
      color: #FFFFFF;
      line-height: calc(100vw * 64 / 2560);
      text-align: left;
    }

    .bottom {
      width: 100%;
      height: calc(100vw * 120 / 2560);
      display: flex;
      justify-content: space-around;
      align-items: center;

      uni-button {
        width: calc(100vw * 230 / 2560);
        height: calc(100vw * 80 / 2560);
        border-radius: calc(100vw * 40 / 2560);
        font-size: calc(100vw * 32 / 2560) !important;
        border: none;
      }

      // bottom 里第一个按钮的样式
      :first-child {
        background: linear-gradient(180deg, #3670FF 0%, #1022D5 100%);
        box-shadow: inset 0px 0px 9px 1px #1C0007;
      }

      :last-child {
        background: linear-gradient(180deg, #FF7171 0%, #BE1212 100%);
        box-shadow: inset 0px 0px 9px 1px #1C0007;
        text-align: center;
      }
    }
  }

}


// 添加闪烁动画关键帧
@keyframes bgFlash {
  0% {
    background-color: transparent;
  }

  16.7% {
    background-color: rgba(54, 112, 255, 0.2); // 使用半透明的主题色
  }

  33.3% {
    background-color: transparent;
  }

  50% {
    background-color: rgba(54, 112, 255, 0.2);
  }

  66.7% {
    background-color: transparent;
  }

  83.3% {
    background-color: rgba(54, 112, 255, 0.2);
  }

  100% {
    background-color: transparent;
  }
}
</style>